<template>
  <div class="form-view">
    <div class="view-type-list">
      <div
        v-for="item in views"
        :key="item.value"
        :class="viewType === item.value ? 'active' : ''"
        class="view-type icon iconfont"
        @click="viewType = item.value"
        v-html="item.label"
      ></div>
    </div>
    <TableView v-show="viewType === 1" />
    <MobileView v-show="viewType === 2" />
  </div>
</template>

<script setup lang="ts">
import TableView from './edit/TableView.vue'
import MobileView from './edit/MobileView.vue'
const viewType = ref(1)
const views = ref([
  {
    value: 1,
    label: '&#xe8dc;'
  },
  {
    value: 2,
    label: '&#xe600;'
  },
  {
    value: 3,
    label: '&#xea28;'
  }
])
</script>

<style lang="scss" scoped>
.form-view {
  height: 100%;
  position: relative;
  .view-type-list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    .view-type {
      cursor: pointer;
      padding: 5px 15px;
      line-height: 28px;
      &:hover,
      &.active {
        color: #409eff;
      }
    }
  }
}
</style>
